<template>
  <!-- <div ref="dom" class="charts chart-bar"></div> -->
  <div ref="dom" style="background-color: #f6f7fb"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./dpot.json";
import { on, off } from "@/libs/tools";
// echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "SanjiaoChartBar",
  props: {
    value: Array,
    text: String,
    rotate: String,
    position: Object,
    subtext: String,
    xData: Object,
    clickTag: String,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    legendData: Array,
    seriesName: String,
    color: {
      type: Array,
      default: () => {
        return ["#2f83e4"];
      },
    },
  },
  data() {
    return {
      dom: null,
      symbols: [
        "path://M960 960H64L332.8 64h358.4z",
        "path://M250,150 L150,350 L350,350 Z",
      ]
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    text: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    xData: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    position: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    rotate: {
      deep: true,
      handler (val) {
        this.intChart()
      }
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    intChart() {
      var symbols = this.symbols
      this.dom = echarts.init(this.$refs.dom)
      this.dom.showLoading({
        text: 'loading',
        color: '#2D8CF0',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      })
      let datas = this.value
      let data = {}
      let list = []
      for (let i in datas){
        let key = datas[i].name
        let value = datas[i].value
        data[key] = value
        list.push(value)
      }
      var bodyMaxData = [];
      var series = [];
      var xAxisData = [];
      var legendData = ["前1%", "前15%", "后85%"]
      for (var i in data) {
        var sum = 0;
        data[i].forEach((val, index, arr) => {
          sum += val;
        });
        bodyMaxData.push(sum);
        xAxisData.push(i);
      }
      var markPointSetting = {
        symbol: "pin",
        data: [
          {
            type: "max",
            label: {
              formatter: "{c}",
            },
          },
        ],
      };

      var series = [
        {
          name: "前1%",
          type: "pictorialBar",
          symbolClip: true,
          barWidth:'60%',
          data: [],
          z: 1,
          label:{
            show: true,
            position: 'top',
            textStyle: {
                color: '#333'
            },
            formatter:function(params){
              let i = params.dataIndex
              console.log(params, '-')
              if (params.seriesIndex==0){
                // if (list[i][0]==0) {
                //   return ''
                // } else {
                //   return list[i][0]
                // }
                return list[i][0]
              }
              if (params){
                console.log('tag', '')
              }
            }
          }
        },
        {
          name: "前15%",
          type: "pictorialBar",
          symbolClip: true,
          barWidth:'60%',
          data: [],
          z: 2,
          label:{
            show: true,
            // position: this.position,
            position: [this.position.X + '%',this.position.Y + '%'],
            zlevel: 2,
            textStyle: {
              color: '#333'
              },
            formatter:function(params){
              let i = params.dataIndex
              if (params.seriesIndex==1){
                return list[i][1]
              }
            }
          }
        },
        {
          name: "后85%",
          type: "pictorialBar",
          symbolClip: true,
          barWidth:'60%',
          // animationDuration: 0,
          data: [],
          z: 3,
          label:{show: true,position: 'inside',
          textStyle: {
            color: '#333'
          },
          formatter:function(params){
              let i = params.dataIndex
              if (params.seriesIndex==2){
                return list[i][2]
              }
            }}
        },
      ];
      var num = 0;
      for (var i in data) {
        for (var j in data[i]) {
          var jsonData = {
            symbolBoundingData: bodyMaxData[num],
            symbol: symbols[1],
            // label: labelSetting
          };
          if (j == 0) {
            jsonData["value"] = data[i][0] == 0 ? 0 : bodyMaxData[num];
            if (jsonData["value"] == 0) {
              jsonData["symbol"] = symbols[0];
            } else {
              jsonData["symbol"] = symbols[1];
            }
          }
          if (j == 1) {
            if (data[i][0] == 0) {
              jsonData["value"] = bodyMaxData[num];
              jsonData["symbol"] = symbols[0];
            } else {
              jsonData["value"] = bodyMaxData[num] - data[i][0];
              jsonData["symbol"] = symbols[1];
            }
          }
          if (j == 2) {
            jsonData["value"] = bodyMaxData[num] - data[i][1] - data[i][0];
            if (data[i][0] == 0) {
              jsonData["symbol"] = symbols[0];
            } else {
              jsonData["symbol"] = symbols[1];
            }
          }
          series[j]["data"].push(jsonData);
        }
        num++;
      }
      console.log(this.rotate, 'this.rotate--------------------')
      this.$nextTick(() => {
        var option = {
          color:  [
            // '#74D8C9',
            '#ffcb5e',
            '#AC88FD',
            '#5383FF',
            '#59C692',
            '#FF617F',
            '#3C58BC',
            '#5CD5F5',
            '#7C84FF',
            '#c4ccd3'
          ],
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            y: 'center',
            right: '10px',
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              // magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: legendData,
            bottom: '3%'
          },
          notMerge: true,
          xAxis: {
            data: xAxisData,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { show: true,interval:0,
              textStyle:{
                color: '#333',
                fontSize:16,
                fontWeight: 500,
              },
              rotate: this.rotate
            },
          },
          yAxis: {
            min: 0,
            offset: 20,
            splitLine: { show: true },
          },
          grid: {
            // top: "center",
            // height: 230,
            top: '20%',
            bottom: '20%',
          },
          // markLine: {
          //     z: -100
          // },
          series: series,
        };
        setTimeout(() => {
          // setOption前隐藏loading事件
          this.dom.hideLoading();
          this.dom.setOption(option, true)
        }, 1000);
        on(window, "resize", this.resize);
      })
    },
  },
  mounted() {
    this.intChart();
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  },
};
</script>
